<template>
<div class="businessItem" @click="goDetial">
  <span class="title">{{ params.title }}</span>
  <div class="picdes">
<!--    <span>实现业务</span>-->
    <span>委托办理 &nbsp;></span>
<!--    <span>了解详情 ></span>-->
  </div>
</div>
</template>

<script>
export default {
  name: "businessItem",
  props:{
    params:{
      default:()=>{}
    },
    router2List:{
      default:()=>[]
    },
    router1List:{
      default:()=>[]
    },
    router3List:{
      default:()=>[]
    },
  },
  computed:{
    userType(){
      return this.$store.getters.userType
    },
    isLogin(){
      return this.$store.getters.isLogin
    },
  },
  methods:{
    goDetial(){
      if(!this.isLogin){
        this.$router.push({name:'login'})
        return
      }
      if(this.router1List.includes(this.params.name) || this.router2List.includes(this.params.name) ){
        if(this.userType.includes('货主') || this.userType.includes('货代')){
          this.$router.push({name:this.params.name})
        }else{
          this.$router.push({name:'noPermission2'})
        }
      }else if(this.router3List.includes(this.params.name)){
        if(this.userType.includes('船公司') || this.userType.includes('船代理') || this.userType.includes('货主') || this.userType.includes('货代')){
          this.$router.push({name:this.params.name})
        }else{
          this.$router.push({name:'noPermission2'})
        }
      }else {
        this.$router.push({name:'noPermission2'})
      }
    }
  },
}
</script>

<style scoped lang="less">
.businessItem{
  cursor: pointer;
  .title{
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    display: inline-block;
    margin-bottom: 5px
  }
  .picdes{
    width: 160px;
    height: 60px;
    background: #F8F8F8;
    border: 1px solid #EEEEEE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../../../assets/businessBg.png");
    background-size: 100% 100%;
    span{
      font-size: 12px;
      font-weight: 500;
      display: inline-block;
      margin-left: 10px;
      color: #0C4AC1;
      //&:first-child{
      //  margin-top: 5px;
      //}
      //&:last-child{
      //  color: #666666;
      //}
    }
  }
}
</style>